<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="application/javascript" src="/client/js/jquery.min.js"></script>
<script type="text/javascript">

/**
 * my_click和my_blur均是用于前台页面搜索框的函数
 */
//鼠标点击搜索框时执行
function my_click(obj, myid){
	//点击时，如果取得的值和搜索框默认value值相同，则将搜索框清空
	if (document.getElementById(myid).value == document.getElementById(myid).defaultValue){
	  document.getElementById(myid).value = '';
	  obj.style.color='#000';
	}
}
//鼠标不聚焦在搜索框时执行
function my_blur(obj, myid){
	//鼠标失焦时，如果搜索框没有输入值，则用搜索框的默认value值填充
	if (document.getElementById(myid).value == ''){
	 document.getElementById(myid).value = document.getElementById(myid).defaultValue;
	 obj.style.color='#999';
 }
}

/**
 * 点击搜索按钮执行的函数
 */
function search(){
	document.getElementById("searchform").submit();
}

/*页面加载完成后执行查询分类*/
$(function(){
  $.ajax({
	  url:"/category.do",
	  type:"post",
	  dataType:"json",
	  success:function (data) {
		  var mycategory = $("#divmenu").html("");
		  var str = "";
		  for (var i = 0;i<data.length && i<14 ;i++){
		  	 str = str+"<a href=\"${pageContext.request.contextPath}/category/showPagePoroductByCid.do?currentPage=1&cid="+data[i].id+"\">"+data[i].name+"</a> ";
		  }
		  str = str+"<a href=\"${pageContext.request.contextPath}/category/showPagePoroductByCid.do?currentPage=1\" style=\"color:#b4d76d\">全部商品目录</a>"
		  mycategory.append(str);
	  }
  })

});
</script>
<div id="divmenu">
	<a href="${pageContext.request.contextPath}/category.do" style="color: #2b542c">更多分类查询</a>
</div>
<div id="divsearch">
<form action="${pageContext.request.contextPath }/searchProductsByName.do" id="searchform">
	<table width="100%" border="0" cellspacing="0">
		<tr>
			<td style="text-align:right; padding-right:220px">
				Search 
				<input type="text" name="name" class="inputtable" id="textfield" value="" placeholder="请输入书名"
				onmouseover="this.focus();"
				onclick="my_click(this, 'textfield');"
				onBlur="my_blur(this, 'textfield');"/> 
				<a href="#">
					<img src="${pageContext.request.contextPath}/client/images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> 
				</a>
			</td>
		</tr>
	</table>
</form>
</div>